<template>
	<view>
		<template v-if="!loading">
			<view v-for="(item,index) in active" :key="index">
				<view class="created_at">
					{{item.created_at | changeTime}}
				</view>
				<view class="activeContent">
					<view class="content">
						<template v-if="type=='image'">
							<view class="contentItem" v-for="(image,iIndex) in item.images" :key='iIndex'>
								<view @click.stop="select(image)" class="selectBox"
									:class='{select:selectItem.some(selectItem=>selectItem.url==image.url)}'>
									<u-icon name='checkmark' color='#fff' />
								</view>
								<image :src="image.url" mode="aspectFill" @click="clickImage(image.url,item.images)">
								</image>
							</view>
						</template>
						<template v-if="type=='video'">
							<view class="contentItem" v-for="(video,vIndex) in item.videos" :key="vIndex">
								<view @click.stop="select(video)" class="selectBox"
									:class='{select:selectItem.some(selectItem=>selectItem.url==video.url)}'>
									<u-icon name='checkmark' color='#fff' />
								</view>
								<video :src="video.url" object-fit='cover' />
							</view>
						</template>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view v-for="(item,index) in 5" :key="index">
				<view class=" Skeleton" style="height: 30rpx;" />
				<view class="activeContent" style="border: none;">
					<view class="content">
						<view class="Skeleton contentItem" v-for="item in 3" :key="item"></view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import album from '@/components_company/album.vue';
	export default {
		components: {
			album
		},
		props: ['loading', 'prorcessesId', 'activities',  'type'],
		computed: {
			active() {
				return this.activities.filter(item => item.process_id == this.prorcessesId).sort(function(a, b) {
					return new Date(b.created_at) - new Date(a.created_at);
				});

			}
		},
		data() {
			return {
				selectItem: []
			}
		},
		watch:{
			loading(){
				this.selectItem=[]
			}
		},
		methods: {
			clickImage(item, images) {
				uni.previewImage({
					urls: images.map(item => item.url),
					current: item
				});
			},
			select(item) {
				this.selectItem=[item]
				this.$emit('selectChange',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.created_at {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		margin-right: 40rpx;

		&:before {
			content: "";
			width: 30rpx;
			height: 30rpx;
			border-radius: 100%;
			border: 1rpx solid orange;
			margin-right: 10rpx;
		}
	}

	image,
	video {
		width: 100%;
		height: 100%;
	}

	.contentItem {
		width: 170rpx;
		height: 170rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.activeContent {
		padding: 0 0 0 25rpx;
		margin: 10rpx 0 10rpx 15rpx;
		border-left: 1rpx dashed #bbb;

		>.content {
			box-shadow: 0 0 10rpx #ddd;
			margin-right: 30rpx;
			padding: 20rpx;
			border-radius: 8rpx;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;

		}
	}

	.selectBox {
		background-color: #fff;
		z-index: 1;
		top: 10rpx;
		right: 10rpx;
		border-radius: 100%;
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		border: 1rpx solid #999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.select {
		background-color: green;

	}
</style>